import React, { useState } from 'react';

export default () => {
  const [color, setColor] = useState('green')
  function changeColor() {
    setColor(color === 'green' ? '#ff5500' : 'green')
  }
  return (
    <div className="wrap">
      <h2>JSX 写 CSS</h2>
      <button onClick={changeColor}>改变颜色</button>
      {/* 
      CSS 样式需要用 {} 进行包裹
      会自动加入一个随机类名, 如：jsx-67c94af06e929547
    */}
      <style jsx>
        {
          `
          .wrap{
            padding: 20px
          }
          h2{
            color: ${color}
          }
          
        `
        }
      </style>
    </div>
  )

}
